<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.calendar{
        background: #FFF;
        position: relative;
        width: 670px;
        height: auto;
        margin: 2px auto;
        border-radius: 2px;
        font-family: "PingFangSC-Regular";
        overflow: hidden;
        .ym{
            padding: 40px 0 30px;
            font-size: 36px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .prev{
                width: 20px;
                height: 30px;
                background-size: 100% 100%;
                margin-left: 17px;
            }
            .currentData{
                width: 200px;
                font-family: PingFangSC-Medium;
                font-size: 32px;
                color: #333;
            }
            .next{
                width: 20px;
                height: 30px;
                background-size: 100% 100%;
                margin-right: 17px;
            }
        }
        ul.thead{
            width: 100%;
            display: table;
            padding-bottom: 36px;
            li{
                width: 14.28%;
                height: 40px;
                text-align: center;
                font-size: 28px;
                float: left;
                font-family: PingFangSC-Regular;
                color: #888;
                span{
                    font-size: 22px;
                }
            }
        }
        #data{
            margin-top: 0;
            li{
                width: 14.28%;
                height: 70px;
                text-align: center;
                float: left;
                span.day{
                    font-size: 28px;
                    height: 28px;
                    font-family: PingFangSC-Regular;
                    color: #A3A3A1;
                    margin-bottom: 4px;
                }
                img{
                    width: 32px;
                    height: 32px;
                    display: block;
                    margin: 0 auto;
                    background-size: cover;
                }
                span{
                    font-size: 22px;
                    display: block;
                    color: #ccc;
                }
                .pro {
                    font-size: 22px;
                    color: #CCC;
                    margin-top: 12px;
                }
            }
            li.active{
                color: #FD810B;
                span.pro{
                    font-size: 22px;
                    color: #FD810B;
                    margin-top: 12px;
                }
            }
        }
    }

</style>
</head>
<body>

 <div class="calendar">
        <div class="ym">
            <!--后一个月按钮-->
            <i class="prev" onclick="prevMonth">{{ '<' }}</i>
            <!-- 今天的年/月，如图显示的2019年11月 -->
            <span class="currentData">{{ year }}年{{ month }}月</span>
             <!--前一个月按钮-->
            <i class="next" onclick="nextMonth">{{ '>' }}</i>
        </div>
        <ul class="thead">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ul id="data">
            <li v-for="(value, key) in calList" :key="key" :class="{active:value==today}">
                <!--展示日期-->
                <span class="day">{{ value }}</span>
                <span class="pro" v-if="showProgrssStatus(value) === 0">{{ '休' }}</span>
            </li>
        </ul>
    </div>


</body>
<script type="text/javascript">

 export default {
        data() {
            return {
                year: '',               // 当前年份
                month: '',              // 当前月份
                today: 0,               // 当前日期
                calList: [],            // 日历数组
                progressData: [],       // 日历中的特殊表识
            };
        },
        mounted() {
            this.getCalendar();
        },
        methods: {
            getCalendar(cYear, cMonth) {
                let calendarArr = [];
                let myDate = new Date();
                let year = cYear || this.year ? this.year : myDate.getFullYear();
                let month = cMonth || this.month ? this.month : (myDate.getMonth() + 1);
                let today = myDate.getDate();

                this.year = year;
                this.month = month;
                this.today = today;

                let firstday = new Date(year, (month -1), 1).getDay();//当月第一天是周几
                let days = new Date(year,month, 0).getDate();//当月有多少天+1
                for (let i=0; i < days; i++) {
                    calendarArr[i] = i+1;
                }
                for (let j=0; j < firstday; j++) {    // 日 一 二 三 四 五 六         当月首日前位置补‘’
                    calendarArr.unshift('');
                } 
                // 获取日历的行数  
                let len = calendarArr.length;
                let line = Math.ceil(len / 7);

                for (let k = 0; k < line * 7 - len; k++) {    // 日 一 二 三 四 五 六         当月最后一日后位置补‘’
                    calendarArr.push('');
                } 
                this.calList = calendarArr;
                //   '' ''  ''  ''   ''  ''  1          当月首日前位置补‘’
                //   2   3   4   5   6   7   8 
                //   9   10  11  12  13  14  15
                //   16  17  18  19  20  21  22
                //   23  24  25  26  27  28  29 
                //   30  31  ''  ''  ''  ''  ''         当月最后一日后位置补‘’
                // 调用接口，获取需要显示的数据
                // eg：2019年11月7日休息，status为0的才会显示
                this.progressData = [
                    {
                        day: 7,
                        month: 11,
                        year: 2019,
                        status: 0
                    }
                ];
            },
            // 上一个月按钮点击
            prevMonth () {
                this.progressData = [];
                this.month--;
                if (this.month < 1) {
                    this.month = 12;
                    this.year--; 
                }
                this.getCalendar(this.year, this.month);
            },
            // 下一个月按钮点击
            nextMonth () {
                this.progressData = [];
                this.month++;
                if (this.month > 12) {
                    this.month = 1;
                    this.year++;
                }
                this.getCalendar(this.year,this.month);
            },
            // 计算日历中每日任务的状态
            showProgrssStatus (value) {
                for (let item in this.progressData) {
                    if (this.progressData[item].day === value && this.progressData[item].month === this.month && this.progressData[item].year === this.year) {
                        if (this.progressData[item].done_time >= this.progressData[item].all_time) {
                            return 1;
                        } else {
                            return this.progressData[item].status;
                        }
                    }
                }
            },
        }
    };
</script>

</html>